<title>导航</title>

<div class="content-header row">
	 <div class="content-header-left col-md-8 col-12 mb-2 breadcrumb-new">
	 	<h3 class="content-header-title mb-0 d-inline-block">导航</h3>
	 	<div class="row breadcrumbs-top d-inline-block">
	 		<div class="breadcrumb-wrapper mr-1">
	 			<ol class="breadcrumb">
	 				<li class="breadcrumb-item"><a href="/dashboard" class="menu-router">首页</a></li>
	 				<li class="breadcrumb-item"><a href="javascript:;">组件</a></li>
	 				<li class="breadcrumb-item active">导航</li>
	 			</ol>
	 		</div>
	 	</div>
	 </div>
</div>

<div class="content-body">
<!-- Horizontal Navs start -->
<section id="horizontal-nav-components" class="nav-component-Clickable Areas">
	<div class="row match-height">
		<div class="col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header pb-0">
					<h4 class="card-title">Base nav</h4>
					<p>Roll your own navigation style by extending the base <code>.nav</code> component. All Bootstrap’s nav components are built on top of this by specifying additional styles.</p>
				</div>
				<div class="card-content">
					<div class="card-body pt-0">
						<ul class="nav">
							<li class="nav-item">								
								<a href="#" class="nav-link active">Active Area</a>
							</li>
							<li class="nav-item">
								<a href="#" class="nav-link">Clickable Link</a>
							</li>
							<li class="nav-item">
								<a href="#" class="nav-link">Clickable Link</a>
							</li>
							<li class="nav-item">
								<a href="#" class="nav-link disabled">Disabled</a>
							</li>
						</ul>
						
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header pb-0">
					<h4 class="card-title">Nav with Border</h4>
					<p>To wrap with border, use <code>.wrap-border</code> class.</p>
				</div>
				<div class="card-content">
					<div class="card-body">
						<ul class="nav wrap-border">
							<li class="nav-item">
								<a href="#" class="nav-link active">Active Area</a>
							</li>
							<li class="nav-item">
								<a href="#" class="nav-link">Clickable Link</a>
							</li>
							<li class="nav-item">
								<a href="#" class="nav-link">Clickable Link</a>
							</li>
							<li class="nav-item">
								<a href="#" class="nav-link disabled">Disabled</a>
							</li>
						</ul>
						
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header pb-0">
					<h4 class="card-title">Nav with Icon</h4>						
				</div>
				<div class="card-content">
					<div class="card-body">
						<ul class="nav">
							<li class="nav-item">
								<a href="#" class="nav-link active"> <i class="la la-bank"></i> Active Area</a>
							</li>
							<li class="nav-item">
								<a href="#" class="nav-link"><i class="la la-edit"></i>Click</a>
							</li>
							<li class="nav-item">
								<a href="#" class="nav-link"><i class="la la-envelope-o"></i>Click</a>
							</li>
							<li class="nav-item">
								<a href="#" class="nav-link disabled"><i class="la la-eye-slash"></i>Disabled</a>
							</li>
						</ul>
						
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header pb-0">
					<h4 class="card-title">Nav with Pills</h4>							
				</div>
				<div class="card-content">
					<div class="card-body">
						<ul class="nav">
							<li class="nav-item">
								<a href="#" class="nav-link active">Active Area<span class="badge badge-pill badge-glow badge-default badge-danger float-right">6</span></a>
							</li>
							<li class="nav-item">
								<a href="#" class="nav-link">Clickable Link<span class="badge badge-pill badge-glow badge-default badge-info float-right">5</span></a>
							</li>
							<li class="nav-item">
								<a href="#" class="nav-link">Clickable Link<span class="badge badge-pill badge-glow badge-default badge-info float-right">7</span></a>
							</li>
							<li class="nav-item">
								<a href="#" class="nav-link disabled">Disabled<span class="badge badge-pill badge-glow badge-default badge-secondary float-right">9</span></a>
							</li>
						</ul>
						
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Horizontal Navs end -->

<!-- Navs with Horizontal alignment start -->
<section id="navs-horizontal-alignment" class="nav-component-examples">
	<div class="row">
		<div class="col-12 mt-1">
			<h3 class="text-uppercase">Horizontal alignment Options</h3>
			<p>Change the horizontal alignment of your nav with flexbox utilities. By default, navs are left-aligned, but you can easily change them to center or right aligned.</p>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-lg-12 col-md-12">
			<div class="card">
				<div class="card-header pb-0">
					<h4 class="card-title">Justify Content Start</h4>
					<p> with <code>.justify-content-start</code> class.</p>
				</div>
				<div class="card-content">
					<div class="card-body pt-0">
						<ul class="nav justify-content-start">
							<li class="nav-item">
								<a class="nav-link active" href="#">Active Area</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#">Click</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#">Click</a>
							</li>
							<li class="nav-item">
								<a class="nav-link disabled" href="#">Disabled</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-12 col-md-12">
			<div class="card">
				<div class="card-header pb-0">
					<h4 class="card-title">Justify Content Center</h4>
					<p>Centered with <code>.justify-content-center</code> class.</p>
				</div>
				<div class="card-content">
					<div class="card-body pt-0">
						<ul class="nav justify-content-center">
							<li class="nav-item">
								<a class="nav-link active" href="#">Active Area</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#">Click</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#">Click</a>
							</li>
							<li class="nav-item">
								<a class="nav-link disabled" href="#">Disabled</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-12 col-md-12">
			<div class="card">
				<div class="card-header pb-0">
					<h4 class="card-title">Justify Content End</h4>
					<p>with <code>.justify-content-end</code> class.</p>
				</div>
				<div class="card-content">
					<div class="card-body pt-0">
							<ul class="nav justify-content-end">
									<li class="nav-item">
									  <a class="nav-link active" href="#">Active Area</a>
									</li>
									<li class="nav-item">
									  <a class="nav-link" href="#">Click</a>
									</li>
									<li class="nav-item">
									  <a class="nav-link" href="#">Click</a>
									</li>
									<li class="nav-item">
									  <a class="nav-link disabled" href="#">Disabled</a>
									</li>
								  </ul>

					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Navs with Horizontal alignmentend -->

<!-- Basic Navs start -->
<section id="basic-nav-components" class="nav-component-Clickable Areas">
	<div class="row">
		<div class="col-12 mt-1">
			<h3 class="text-uppercase">Vertical Navs</h3>
			<p>Stack your navigation by changing the flex item direction with the <code>.flex-column</code> utility</p>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Base nav</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Roll your own navigation style by extending the base <code>.nav</code> component. All Bootstrap’s nav components are built on top of this by specifying additional styles.</p>
						<ul class="nav flex-column">
							<li class="nav-item">
								<a class="nav-link active">Active Area</a>
							</li>
							<li class="nav-item">
								<a class="nav-link">Clickable Link</a>
							</li>
							<li class="nav-item">
								<a class="nav-link">Clickable Link</a>
							</li>
							<li class="nav-item">
								<a class="nav-link disabled">Disabled</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Nav with Border &amp; Divider</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>To add divider, use <code>.dropdown-divider</code> class to <code>&lt;li&gt;</code></p>
						<ul class="nav flex-column wrap-border">
							<li class="nav-item">
								<a class="nav-link active">Active Area</a>
							</li>
							<li class="nav-item">
								<a class="nav-link">Clickable Link</a>
							</li>
							<li class="nav-item">
								<a class="nav-link">Clickable Link</a>
							</li>
							<li class="dropdown-divider"></li>
							<li class="nav-item">
								<a class="nav-link disabled">Disabled</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Basic Navs end -->

<!-- Navs with Labels & Label pills start -->
<section id="navs-labels-pills" class="nav-component-examples">
	<div class="row">
		<div class="col-12 mt-1">
			<h3 class="text-uppercase mb-1">Navs with Labels &amp; Label pills</h3>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">With Label</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>To add label to nav, use <code>.badge.badge-COLOR</code> classes.</p>
						<ul class="nav flex-column wrap-border">
							<li class="nav-header">
								<span class="badge badge-default badge-success">New</span> Heading 1
							</li>
							<li class="nav-item">
								<a class="nav-link active">Active Area</a>
							</li>
							<li class="nav-item">
								<a class="nav-link">Clickable Area</a>
							</li>
							<li class="nav-item">
								<a class="nav-link">Clickable Area</a>
							</li>
							<li class="dropdown-divider"></li>
							<li class="nav-header">Heading 2
								<span class="badge badge-default badge-warning float-right">beware</span>
							</li>
							<li class="nav-item">
								<a class="nav-link">Clickable Area</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">With Label Pills</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>To add label pill to nav, use <code>.badge.badge-pill.badge-COLOR</code> classes.</p>
						<ul class="nav flex-column wrap-border">
							<li class="nav-header">
								<span class="badge badge-pill badge-default badge-danger badge-glow">5</span> Heading 1
							</li>
							<li class="nav-item">
								<a class="nav-link active">Active Area</a>
							</li>
							<li class="nav-item">
								<a class="nav-link">Clickable Area</a>
							</li>
							<li class="nav-item">
								<a class="nav-link">Clickable Area</a>
							</li>
							<li class="dropdown-divider"></li>
							<li class="nav-header">Heading 2
								<span class="badge badge-pill badge-default badge-info badge-glow float-right">7</span>
							</li>
							<li class="nav-item">
								<a class="nav-link">Clickable Area</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">With Label for links</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<ul class="nav flex-column wrap-border">
							<li class="nav-header">
								<i class="ft-disc"></i>
								<span class="badge badge-default badge-success float-right">New</span> Heading 1
							</li>
							<li class="nav-item">
								<a class="nav-link active">Active Area
									<span class="badge badge-pill badge-default badge-danger float-right badge-glow">6</span>
								</a>
							</li>
							<li class="nav-item">
								<a class="nav-link">Clickable Link
									<span class="badge badge-pill badge-default badge-danger float-right badge-glow">7</span>
								</a>
							</li>
							<li class="nav-item">
								<a class="nav-link">Clickable Link
									<span class="badge badge-pill badge-default badge-danger float-right badge-glow">9</span>
								</a>
							</li>
							<li class="dropdown-divider"></li>
							<li class="nav-header">
								<i class="ft-disc"></i> Heading 2
								<span class="badge badge-default badge-info float-right">Info</span>
							</li>
							<li class="nav-item">
								<a class="nav-link">Clickable Link
									<span class="badge badge-pill badge-default badge-warning float-right badge-glow">5</span>
								</a>
							</li>
							<li class="nav-item">
								<a class="nav-link">Clickable Link
									<span class="badge badge-pill badge-default badge-warning float-right badge-glow">6</span>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">With Label Pills for links</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<ul class="nav flex-column wrap-border">
							<li class="nav-header">
								<i class="ft-disc"></i>
								<span class="float-right">Notifications
								</span>
								Heading 1
							</li>
							<li class="nav-item">
								<a class="nav-link active">Active Area
									<span class="badge badge-pill badge-glow badge-default badge-warning float-right">6</span>
								</a>
							</li>
							<li class="nav-item">
								<a class="nav-link">Clickable Link
									<span class="badge badge-default badge-info badge-pill badge-glow float-right">5</span>
								</a>
							</li>
							<li class="nav-item">
								<a class="nav-link">Clickable Link
									<span class="badge badge-default badge-success badge-pill badge-glow float-right">7</span>
								</a>
							</li>
							<li class="dropdown-divider"></li>
							<li class="nav-header">
								<i class="ft-disc"></i>
								Heading 2
								<span class="float-right">
									Available
								</span>
							</li>
							<li class="nav-item">
								<a class="nav-link">Clickable Link
									<span class="badge badge-default badge-danger float-right">Offline</span>
								</a>
							</li>
							<li class="nav-item">
								<a class="nav-link">Clickable Link
									<span class="badge badge-default badge-success float-right">Online</span>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Navs with Labels &amp; Label pills end -->
</div>

<script type="text/javascript">
	
</script>